<template>
  <el-config-provider size="small" v-if="show">
    <TopologyEditor :editable="query.type == '1'" :data="data" />
  </el-config-provider>
</template>

<script setup lang="ts">
// import { getTopo } from '@/api/operate/project-management/configuration-management/index'
import { getTemplateDetail, getTopo } from '@/api/topo/index'
import { configurationPageStore } from "@/store/modules/configurationPage";
import TopologyEditor from '@/components/TopologyEditor/index.vue'
import '@/assets/main.css'
// import data from './data.json?raw'
defineOptions({
  name: 'Topology'
})
const router = useRouter()
const data = ref('')
const query = reactive(router.currentRoute.value.query)
const show = ref(false)
onBeforeMount(() => {
  let store = configurationPageStore()
  store.setTopoId(query.id)
  store.setSource(query.source)
  if (query?.source == 'manage') {
    getTemplateDetail({ id: query.id }).then(res => {
      data.value = JSON.stringify(res.result.topoInfo.topoData)
      store.setTopoName(`模板-${res.result.topoInfo.topoName}`)
      store.setUnityId(res.result.topoInfo.unityId)
      show.value = true
    })
  } else {
    getTopo({ topoId: query.id, projectId: query.projectId }).then(res => {
      data.value = JSON.stringify(res.result.topoInfo.topoData)
      store.setTopoName(res.result.topoInfo.topoName)
      store.setUnityId(res.result.topoInfo.unityId)
      store.setProjectId(res.result.topoInfo.projectId)
      show.value = true
    })
  }
})
</script>